<template>
  <el-select v-model="value" placeholder="目的" class="selected" @change="searchcoursebyaim(value)">
    <el-option
      :value="option_init"
    >
    </el-option>
    <el-option
      v-for="item in options"
      :value="item.aim_name"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: '',
        option_init:"不限"
      }
    },
    created() {
      var this_ = this
      this.$axios.get('http://127.0.0.1:8080/course/aim')
        .then(function (response) {
          console.log(response.data);
          this_.options=response.data
          console.log(this_.options);
        })
    },
    methods:{
      searchcoursebyaim:function(a){
        if(a=="不限"){
          this.$store.state.value='';
          this.getcourse();
        }else {
          this.$store.state.value = a;
          this.getcourse();
        }
        console.log(a);
      },
      getcourse: function () {
        let this_ = this;
        this_.$axios.get('http://127.0.0.1:8080/course/getcourse', {
          params: {
            aim: this_.$store.state.value,
            grade:this_.$store.state.values
          }
        })
          .then(function (response) {
            this_.$store.state.course = response.data
          })
      }
    }
  }
</script>

<style>
  .selected{
    width: 120px;
    height: 25px;
    margin-top: 10px;
    margin-left: 0;
  }
</style>
